<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>报名后台</title>
     <base th:href="${#request.getContextPath()}+'/'">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!-- bootstrap -->
    <link th:href="@{css/bootstrap/bootstrap.css}" rel="stylesheet"/>
    <link th:href="@{css/bootstrap/datepicker.css}" rel="stylesheet"/>
    <link th:href="@{css/bootstrap/bootstrap-responsive.css}" rel="stylesheet"/>
    <link th:href="@{css/bootstrap/bootstrap-overrides.css}" type="text/css" rel="stylesheet"/>
    <link th:href="@{css/bootstrap/bootstrap-datetimepicker.min.css}" type="text/css" rel="stylesheet"/>
    <!-- libraries -->
    <link th:href="@{css/lib/jquery-ui-1.10.2.custom.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{css/lib/font-awesome.css}" type="text/css" rel="stylesheet"/>
    <!-- global styles -->
    <link rel="stylesheet" type="text/css" th:href="@{css/layout.css?dt=20170503}"/>
    <link rel="stylesheet" type="text/css" th:href="@{css/elements.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{css/icons.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{css/ace.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{js/pagination/jquery.pagination.css}"/>
    <!-- this page specific styles -->
    <link rel="stylesheet" th:href="@{css/compiled/index.css}" type="text/css" media="screen"/>
    <link rel="stylesheet" th:href="@{css/main.css}" type="text/css"/>

    <script th:src="@{js/jquery-2.0.3.min.js}"></script>
    <script th:src="@{js/jquery.form.min.js}"></script>
    <script th:src="@{js/ace.min.js}"></script>
    <script th:src="@{js/bootstrap.min.js}"></script>
    <script th:src="@{js/bootstrap/bootstrap-datepicker.min.js}"></script>
    <script th:src="@{js/bootstrap/bootstrap-datetimepicker.min.js}"></script>
    <script th:src="@{js/layer.js}"></script>
    <script th:src="@{js/comm.js}"></script>
    <script th:src="@{js/pagination/jquery.pagination.js}"></script>
    <script th:src="@{js/datagrid.js}"></script>
    <script th:src="@{js/download.js}"></script>
    <script th:src="@{js/bootstrap/bootstrap-datetimepicker.zh-CN.js}"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
 
<div class="navbar navbar-inverse" style="min-height:57px">
    <div class="navbar-inner">
        <button type="button" class="btn btn-navbar visible-phone" id="menu-toggler">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="brand" href="#"><img src="img/logo.png"/></a>

        <ul class="nav pull-right">
            <li class="settings hidden-phone">
                <a href="logout" role="button">
                    <i class="icon-off"></i>
                </a>
            </li>
        </ul>
    </div>
</div>

<div id="sidebar-nav">
    <ul id="dashboard-menu">
        <li  th:each="menu,stat: ${menus}" th:class="${stat.first}?'active'">
            <div th:class="|show-${stat.first} pointer|">
                <div class="arrow"></div>
                <div class="arrow_border"></div>
            </div>
            <a class="item" th:data-url="${menu.permission}" th:id="${menu.flag}">
                <i th:class="${menu.ico}"></i>
                <span th:text="${menu.title}"></span>
            </a>
        </li>
    </ul>
</div>
<div class="content" id="main-content">
</div>
<script type="text/javascript">
    window.onload = function () {
        $('#sidebar-nav').on('click', '.item', function () {
            var that = $(this);
            var url = that.attr('data-url');
            $('#main-content').load(url, {}, function (response, status, xhr) {
                if (status != 'success') {
                    switch (xhr.status) {
                        case 403:
                            layer.msg("对不起，您无此访问权限！", {icon: 5});
                            break;
                        case 404:
                            layer.msg("对不起，无此页面！", {icon: 5});
                            break;
                        case 500:
                            layer.msg("内部错误，请联系管理员！", {icon: 5});
                            break;
                        case 504:
                            layer.msg("超时，请联系管理员！", {icon: 5});
                            break;
                    }
                }
            });
        });

        $('.item:first').trigger('click');

        $('#dashboard-menu > li').on('click', function () {
           var that = $(this);
            if ($(this).hasClass('active')) {
                return;
            }
            $('#dashboard-menu > li.active').removeClass('active');
            $(this).addClass('active');

            var point = that.find('.pointer:first');
            if(point.hasClass('show-false')){
               $('.pointer').removeClass('show-true').addClass('show-false');
               point.removeClass('show-false');
            }
        });
    };
</script>
</body>
</html>